<template>
	<view class="wrapper">
		<!-- 顶部注意事项，未显示关闭，且存在未还款账单的时候才会显示 -->
		<view v-if="checkShowTopTip()" class="topTip">
			<text>{{ returnTopToolTip() }}</text>
			<image @click="showTopTip = false" src="/static/billDetail/close.png" class="close-icon" />
		</view>

		<view class="goods-section">
			<view class="g-header b-b">
				<text class="name">商品信息</text>
			</view>
			<view class="g-item">
				<image :src="orderObj.mainImageUrl"></image>
				<view class="right">
					<text class="title clamp">{{ orderObj.productName }}</text>
					<!-- <text class="spec">{{orderObj.skuTitle}}</text> -->
					<view class="price-box">
						<text class="price">￥{{ orderObj.totalRent }}</text>
						<text class="number">x 1</text>
					</view>
				</view>
			</view>
		</view>
		<view class="goods-section">
			<view class="g-header b-b">
				<text class="name">账单信息</text>
			</view>
		</view>

		<view class="period-wrapper">
			<!-- 租金期数列表，把期数列举出来 -->
			<view class="period-list" style="margin-bottom: 100px; padding: 10px">
				<view class="period-item" v-for="(periodObj, idx) in billList" :key="idx"
					style="border: 1px solid #e4e7ed">
					<view class="top">
						<view class="left">
							<!-- <view class="period">{{ periodObj.currentPeriods == 0 ? '增值服务' : periodObj.currentPeriods+ '/' + periodObj.totalPeriods + '期'}}</view> -->
							<!-- <view class="period">{{ periodObj.currentPeriods == 0 ? '增值服务' : periodObj.currentPeriods+ '期'}}</view> -->
							<view class="bottom-money">
								<!-- <view class="money" v-if="periodObj.currentPeriods==0">增值服务: ¥{{ periodObj.currentPeriodsRent }}</view> -->
								<view class="money" v-if="periodObj.currentPeriods!=0">第{{periodObj.currentPeriods}}期:
									¥{{ periodObj.currentPeriodsRent }}</view>
								<view v-if="checkLinePay(periodObj.status)">/已支付￥{{ periodObj.currentPayRent }}</view>
								<text class="red-text">{{ returnAddonText(periodObj) }}</text>
							</view>
						</view>
					</view>
					<view class="bottom">
						<text>支付时间：{{ returnPeriodPayTime(periodObj) }}</text>
						<view v-if="type">
							<template v-if="!checkHasPay(periodObj.status)">
								<image @click="toggleChooseHandler(idx)" :class="{
                                    'check-img': true,
                                    'chose-img': true,
                                    hide: !checkHasChose(periodObj)
                                }" src="/static/orderList/active.png" />
								<view @click="toggleChooseHandler(idx)" :class="{
                                    'check-img': true,
                                    unchose: true,
                                    hide: checkHasChose(periodObj)
                                }"></view>
							</template>
						</view>
						<view v-else>
							<view v-if="periodObj.isLocked == 1">
								<template v-if="!checkHasPay(periodObj.status)">
									<image @click="toggleChooseHandler(idx)" :class="{
                                        'check-img': true,
                                        'chose-img': true,
                                        hide: !checkHasChose(periodObj)
                                    }" src="/static/orderList/active.png" />
									<view @click="toggleChooseHandler(idx)" :class="{
                                        'check-img': true,
                                        unchose: true,
                                        hide: !checkHasChose(periodObj)
                                    }"></view>
								</template>
							</view>
							<view v-else>
								<template v-if="!checkHasPay(periodObj.status)">
									<image @click="toggleChooseHandler(idx)" :class="{
                                        'check-img': true,
                                        'chose-img': true,
                                        hide: !checkHasChose(periodObj)
                                    }" src="/static/orderList/active.png" />
									<view @click="toggleChooseHandler(idx)" :class="{
                                        'check-img': true,
                                        unchose: true,
                                        hide: checkHasChose(periodObj)
                                    }"></view>
								</template>
							</view>
						</view>
						<text :class="{ hasPay: checkHasPay(periodObj.status) }">{{ returnStatusCn(periodObj) }}</text>
					</view>
				</view>
			</view>
		</view>

		<BottomBtn v-if="unpayList && unpayList.length">
			<view slot="ele" class="btn-wrapper"
				style="border: 1px solid rgb(202, 202, 202); overflow: hidden; box-shadow: 0px 0px 8px 0px #b9b9b9">
				<view class="left">
					总计：
					<text class="t-money">
						<text class="fuhao">¥</text>
						{{ payMoney }}
					</text>
				</view>
				<!-- <view @click="payHandler" class="right">去支付</view> -->
				<!--  #ifndef  MP-ALIPAY -->
				<view @click="payHandler1" class="right">去支付</view>
				<!--  #endif -->

				<!--  #ifdef  MP-ALIPAY -->
				<view @click="payHandler_zfb" class="right">去支付</view>
				<!--  #endif -->
			</view>
		</BottomBtn>

		<!-- 选择支付方式的时候的弹出框 -->
		<view class="mengceng" v-if="mengcengShow" @click="tab_mengceng" @touchmove.stop.prevent="moveHandle"></view>
		<view class="tankuang" v-if="tankuangShow" @touchmove.stop.prevent="moveHandle">
			<!-- 				<view class="title">选择支付方式</view>
				<view v-if="$appName === 'kxg' ||  $appName === 'wkyp' ||  $appName === 'hwjg'">
					<view v-if="!helibaoCheckedState">
						<image @click="tab_hlb" style="width: 100%; height: 140rpx" src="../../static/hlb1.jpg"
							mode="aspectFit"></image>
					</view>
					<view v-if="helibaoCheckedState">
						<image @click="tab_hlb" style="width: 100%; height: 150rpx" src="../../static/hlb2.jpg"
							mode="aspectFit"></image>
					</view>
				</view>
				<view v-if="$appName != 'xzyk' && $appName != 'hwjg' && $appName != 'kxg'">
					<view v-if="!zhifubaoCheckedState">
						<image @click="tab_zhifubao" style="width: 100%; height: 140rpx"
							src="../../static/shouye-add/zhifubao1.png" mode="aspectFit"></image>
					</view>
					<view v-if="zhifubaoCheckedState">
						<image @click="tab_zhifubao" style="width: 100%; height: 140rpx"
							src="../../static/shouye-add/zhifubao.png" mode="aspectFit"></image>
					</view>
				</view>
				<view v-if="$appName !== 'kxg'">
					<view v-if="!weixinCheckedState">
						<image @click="tab_weixin" style="width: 100%; height: 140rpx"
							src="../../static/shouye-add/weixin1.png" mode="aspectFit"></image>
					</view>
					<view v-if="weixinCheckedState">
						<image @click="tab_weixin" style="width: 100%; height: 140rpx"
							src="../../static/shouye-add/weixin.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="btn_bottom" @click="btn_comfirm()">确定</view> -->

			<!-- 走接口拿数据做判断 -->
			<view class="title">选择支付方式</view>
			<!-- 银行卡 -->
			<!-- <view v-if="hlbHasPayment">
					<view v-if="!helibaoCheckedState">
						<image @click="tab_hlb" style="width: 100%; height: 140rpx" src="../../static/hlb1.jpg"
							mode="aspectFit"></image>
					</view>
					<view v-if="helibaoCheckedState">
						<image @click="tab_hlb" style="width: 100%; height: 150rpx" src="../../static/hlb2.jpg"
							mode="aspectFit"></image>
					</view>
				</view> -->
			<!-- 支付宝支付 -->
			<view v-if="zfbHasPayment">
				<view v-if="!zhifubaoCheckedState">
					<image @click="tab_zhifubao" style="width: 100%; height: 140rpx"
						src="../../static/shouye-add-rich/zhifubao1-rich.png" mode="aspectFit"></image>
				</view>
				<view v-if="zhifubaoCheckedState">
					<image @click="tab_zhifubao" style="width: 100%; height: 140rpx"
						src="../../static/shouye-add-rich/zhifubao-rich.png" mode="aspectFit"></image>
				</view>
			</view>
			<!-- 微信支付 -->
			<view v-if="wxHasPayment">
				<view v-if="!weixinCheckedState">
					<image @click="tab_weixin" style="width: 100%; height: 140rpx"
						src="../../static/shouye-add-rich/weixin1-rich.png" mode="aspectFit"></image>
				</view>
				<view v-if="weixinCheckedState">
					<image @click="tab_weixin" style="width: 100%; height: 140rpx"
						src="../../static/shouye-add-rich/weixin-rich.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="btn_bottom" @click="btn_comfirm()">确定</view>

		</view>

		<view :hidden="userFeedbackHidden" class="popup_content">
			<view class="popup_title" @click="closePay">
				{{ bankList.length ? '选择银行卡' : '添加银行卡' }}
				<u-icon name="close" size="28"></u-icon>
			</view>
			<view class="setaddress">
				<!-- 头部提示 -->
				<view class="realName-page">
					<view class="contents">
						<view class="contents-item-view">
							<view class="name">持卡人：</view>
							<input type="text" class="contents-item-input" placeholder-class="contents-item-view-city"
								name="realname" v-model="userInfo.userName" disabled />
						</view>
						<view class="contents-item-view">
							<view class="name">银行卡号：</view>
							<input class="contents-item-input" type="number"
								:placeholder="(bankList.length ? '请选择' : '请输入') + '银行卡号'" name="bankCardNo"
								v-model="hlb.bankCardNo" placeholder-class="contents-item-view-city"
								@click="handleClickBankInput" />
						</view>

						<view class="contents-item-view">
							<view class="name">身份证号：</view>
							<input class="contents-item-input" placeholder="身份证" name="street" v-model="userInfo.idCard"
								disabled placeholder-class="contents-item-view-city" />
						</view>

						<view class="contents-item-view" style="padding-right: 30rpx">
							<view class="name">预留手机：</view>
							<input class="contents-item-input" type="number" placeholder="手机号" name="telephone"
								style="width: 40%" v-model="hlb.telephone"
								placeholder-class="contents-item-view-city" />
							<text style="color: #269aff" @click="get_code">{{ yzm_text }}</text>
						</view>

						<view class="contents-item-view">
							<view class="name" style="float: right">验证码：</view>
							<input class="contents-item-input" type="number" placeholder="验证码" name="telephone"
								v-model="hlb.sendCode" placeholder-class="contents-item-view-city" />
						</view>
					</view>
				</view>
				<view class="bank-buttons">
					<u-button class="footer" @click="confirmPay" :disabled="!createHlbOrderStatus" :ripple="true"
						ripple-bg-color="#909399">确认支付</u-button>
				</view>
			</view>
		</view>
		<u-popup v-if="bankList.length" v-model="showBankList" mode="bottom" border-radius="20" closeable
			@open="openBankList" @close="closeBankList">
			<view class="bank-title">请选择银行卡</view>
			<view class="bank-list">
				<scroll-view scroll-y="true" style="height: 600rpx">
					<u-radio-group v-model="hlb.bankCardNo" @change="handleBankRadioChange">
						<u-radio v-for="(item, index) in bankList" :key="index" :name="item.name"
							class="bank-list-item">
							<view class="number">{{ item.name }}</view>
							<view class="name">{{ item.label }}</view>
						</u-radio>
					</u-radio-group>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// 账单详情页面
	import {
		formatStrDate,
		makeAdd,
		makeSub,
		getDateValueOf,
		getShowLoading,
		getHideLoading
	} from '../../utils/index';
	import {
		shareConfigObj,
		billDetailGlobalKey,
		待支付,
		逾期未支付,
		已支付,
		逾期已支付,
		部分还款,
		逾期部分还款,
		api_url,
		baseUrl,
		APP_APPID
	} from '../../utils/constant';
	import BottomBtn from '../subassembly/bottomBtn/bottomBtn.vue';
	import {
		tradePay
	} from '../../utils/platform';
	import {
		request,
		getZWZUserDetail,
		checkHasUserBasicInfo,
		checkHasShiMingRenZheng,
		saveUserId,
		saveZWZUserDetail,
		getUserId
	} from '@/utils';

	// const unpayStatus = [待支付, 逾期未支付, 部分还款, 逾期部分还款]; // 需要进行支付的状态列表
	const unpayStatus = [待支付, 逾期未支付, 部分还款, 逾期部分还款]; // 需要进行支付的状态列表
	const haspayStatus = [已支付, 逾期已支付]; // 已支付过的状态列表
	const unlineStatus = [部分还款, 逾期部分还款]; // 需要线下支付

	export default {
		data() {
			return {
				zfbHasPayment: true,
				wxHasPayment: true,
				hlbHasPayment: true,
				checkBankName: '',
				showBankList: false,
				orderObj: this.$getGlobalData(billDetailGlobalKey) || {}, // 订单对象
				queryOrderId: '', // 从上个页面所传入进来的订单ID
				uids: '',
				showTopTip: true, // 是否显示顶部导航栏
				billList: [], // 账单列表数据，即包括未支付，也包括已支付
				haspayList: [], // 已支付的账单
				unpayList: [], // 未支付的账单
				totalMoney: 0, // 应付租金总额
				haspayMoney: 0, // 已支付租金总额
				periodList: [], // 还款期数数组
				submitting: false, // 表示正在提交中
				fromOrderDetail: false,
				payMoney: 0, // 还款总金额
				type: true,
				hipe: 'checkHasChose(periodObj)',

				mengcengShow: false,
				tankuangShow: false,
				zhifubaoCheckedState: false,
				weixinCheckedState: false,
				uniPlatform: '',
				helibaoCheckedState: false,
				userFeedbackHidden: true,
				createHlbOrderStatus: false,
				hlb: {},
				userInfo: '',
				yzm_text: '获取验证码',
				appid: APP_APPID,
				bankList: []
			};
		},

		watch: {
			/**
			 * 监听账单列表数据发生变化
			 */
			billList: function(newV) {
				let total = 0;
				const list = [];
				for (let obj of newV) {
					if (obj.$choosed) {
						// 表明该期数据被勾选
						const {
							currentPeriods,
							currentPeriodsRent
						} = obj; // 分别对应期数、金额
						total = makeAdd(total, currentPeriodsRent);
						list.push(currentPeriods);
					}
				}
				this.payMoney = total.toFixed(2);
				this.periodList = list;
			}
		},

		onLoad(opt) {
			console.log('订单对象', this.$getGlobalData(billDetailGlobalKey) || {});

			this.uniPlatform = getApp().globalData.uniPlatform;

			// var that = this;
			// #ifdef MP-ALIPAY
			// uni.login({
			// 	provider: 'alipay',
			// 	success: function (loginRes) {
			// 		// 获取用户信息
			// 		uni.getUserInfo({
			// 			provider: 'alipay',
			// 			success: function (infoRes) {
			// 				that.$request("member/mall/aliPay/user/exemptLogin", {
			// 					avatar: infoRes.userInfo.avatarUrl,
			// 					nickName: infoRes.userInfo.nickName,
			// 					authCode: loginRes.authCode
			// 				}, "POST")
			// 					.then((res) => {
			// 						const userDetail = (res && res.data) || {}
			// 						const uid = userDetail.uid
			// 						//saveUserId(uid)
			// 						saveZWZUserDetail(userDetail)
			// 						// eventBus && eventBus.emit("successLoginThenReFetch")

			// 					})
			// 			}
			// 		});
			// 	}
			// });
			// #endif

			if (opt.Json_info) {
				this.orderObj = JSON.parse(opt.Json_info);
			}
			this.queryOrderId = opt && opt.orderId; // 订单ID
			this.uids = opt && opt.uids; // 订单ID
			this.fromOrderDetail = opt && opt.fromOrderDetail == '1'; // 判断是否来自订单详情页面
			if (this.$checkIsPageLessParameter(opt, ['orderId'])) return; // 如果URL传参没有订单ID，那么做出提示
			this.getUserInfo();
			this.fetchPeriodList();
			this.getBankList();
			this.getPaymentList()
		},
		onShow() {
			this.getPaymentList()
		},

		onUnload() {
			this.$delGlobalData(billDetailGlobalKey);
		},

		// 监听点击小程序进行分享，这个页面就不允许进行分享了，因为它依赖上个页面所存在全局的商品数据
		onShareAppMessage() {
			return shareConfigObj;
		},

		// 监听页面的下拉刷新操作
		onPullDownRefresh() {
			this.fetchPeriodList(true);
			this.getPaymentList()
		},

		components: {
			BottomBtn
		},

		methods: {
			//动态获取用户的支付方式（hlb-合利宝，zfb-支付宝，wx-微信）
			getPaymentList() {
				this.$request('order/mall/components/getPayChannelList', {
					orderId: this.queryOrderId,
					uid: this.uids
				}, 'get', false).then((res) => {
					if (res.data && res.data.length > 0) {
						this.zfbHasPayment = res.data.some(item => item.type == 'zfb')
						this.wxHasPayment = res.data.some(item => item.type == 'wx')
						this.hlbHasPayment = res.data.some(item => item.type == 'hlb')
					} else {

					}
				});
			},
			openBankList() {},
			closeBankList() {},
			handleBankRadioChange(value) {
				this.hlb.bankCardNo = value;
				this.showBankList = false;
			},
			handleClickBankInput() {
				if (this.bankList) {
					this.showBankList = true;
				}
			},
			getBankList() {
				this.$request('mall/order/mall/userBankCard/selectBankCard', {
					uid: this.$getUid()
				}, 'post').then((res) => {
					if (res.businessSuccess) {
						this.bankList = (res.data || []).map((item) => ({
							name: item.bankCardNumber,
							id: item.bankCardNumber,
							label: item.bankCardName
						}));
					} else {
						uni.showToast({
							title: res.errorMessage,
							icon: 'none'
						});
					}
				});
			},
			getUserInfo() {
				request('member/mall/userCertification/getDesensitizationByUid', {
					uid: this.uids
				}, 'GET', true).then((res) => {
					console.log('11111111111111111111111用户信息====', res.data);
					this.userInfo = res.data;
				});
			},

			get_code() {
				var that = this;
				var myreg = /^(((1[0-9]{2}))+\d{8})$/;
				if (!myreg.test(that.hlb.telephone)) {
					uni.showToast({
						icon: 'none',
						title: '手机号格式错误'
					});
					return false;
				}
				if (that.yzm_text_ing === true) {
					//倒计时中
					return false;
				}

				//合利宝
				const {
					postData,
					pass
				} = that.returnPostData();
				if (!pass) return;
				if (that.submitting) return;
				getShowLoading({
					title: '处理中...'
				});
				postData.bankCardNo = that.hlb.bankCardNo;
				postData.telephone = that.hlb.telephone;
				that.$request('/order/mall/api/orderByStages/helibaoPay', postData, 'post')
					.then((res) => {
						console.log('支付请求成功', res);
						if (res.data.pay_code == '0000') {
							that.createHlbOrderStatus = true;
							that.yzm_text_ing = true;
							that.yzm_daojishi = 60; //倒计时30秒
							that.yzm_text = '重新获取(' + that.yzm_daojishi + 's)';
							that.setInterval = setInterval(function() {
								that.yzm_daojishi = that.yzm_daojishi - 1; //时间减少
								that.yzm_text = '重新获取(' + that.yzm_daojishi + 's)';

								if (that.yzm_daojishi <= 0) {
									that.yzm_text = '重新获取';
									that.yzm_daojishi = 0;
									that.yzm_text_ing = false;
									clearInterval(that.setInterval); //
								}
							}, 1000);
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.pay_message
							});
						}
					})
					.catch((e) => {
						console.log('支付错误', e);
					})
					.finally(() => {
						getHideLoading();
						console.log('支付结束');
					});
			},

			/**
			 * 做减法操作
			 */
			makeSubHandler(n1, n2) {
				return Math.abs(makeSub(n1, n2));
			},

			/**
			 * 加载还款列表数据
			 * @param {bool} isPullRefresh : 是否是下拉刷新引起的
			 */
			fetchPeriodList(isPullRefresh) {
				this.$request(`order/mall/api/orderByStages/queryOrderByStagesByOrderId?orderId=${this.queryOrderId}`, {},
						'get', true, true)
					.then((res) => {
						// debugger
						// const resData = res.data; // 接口返回的账单列表数据
						//在账单里面去掉碎屏险
						const resData = res.data.filter(item => item.currentPeriods != 0); // 接口返回的账单列表数据
						this.periodListHandler(resData);
						this.computeTotal(resData);
						this.computeHaspayTotalMoney();
					})
					.finally(() => {
						isPullRefresh && uni.stopPullDownRefresh();
					});
			},

			/**
			 * 返回顶部文案
			 */
			returnTopToolTip() {
				const nearestOrder = this.unpayList[0] || {}; // 最近的未支付账单
				const {
					statementDate = ''
				} = nearestOrder; // 最近未还款这期的还款时间以及状态
				if (nearestOrder.currentPeriods == 1) {
					return '';
				}
				const [firstNoPayStamp, firstNoPayYear, firstNoPayMonth, firstNoPayDate] = getDateValueOf(
					statementDate); // 获取最近这期的时间戳和月份
				const [currentStamp, currentYear, currentMonth, currentDate] = getDateValueOf(); // 当前时间戳

				if (firstNoPayYear === currentYear && firstNoPayMonth === currentMonth && firstNoPayDate === currentDate) {
					// 已经到还款日了
					return '今天是您的交租日，请及时支付租金，避免逾期';
				}

				// 1、判断当前的月份是否比第一期月份小
				if (firstNoPayStamp > currentStamp) {
					// 未还账单的第一期是未来的时间
					if (firstNoPayMonth > currentMonth) {
						// 当前期已还完
						return '当期租金已支付，信用满分！';
					} else {
						// 当前期还未还
						const leftTime = firstNoPayStamp - currentStamp;
						let restDate = parseInt(leftTime / 1000 / 60 / 60 / 24, 10);
						restDate === 0 && (restDate = 1);
						return `距离交租日还有${restDate}天，请注意交租时间，避免逾期`;
					}
				} else {
					// 不可能等于的，只有可能小于，等于已经走了最上面if的分支
					return '您有待完成的订单，请及时完成，避免信用受损';
				}
			},

			/**
			 * 计算总租金
			 * @param {Object} queryOrderByStagesByOrderId接口所返回的响应数据
			 */
			computeTotal(resData) {
				const someItem = (resData && resData[0]) || {}; // 每一期数据上都具有总租金字段
				// console.log("计算总租金", someItem)
				this.totalMoney = someItem.totalRent || 0; // 总租金
			},

			/**
			 * 计算已支付的金额
			 */
			computeHaspayTotalMoney() {
				if (Object.prototype.toString.call(this.haspayList) !== '[object Array]' || !this.haspayList.length)
					return;
				const totalValue = this.haspayList.reduce((begin, obj) => makeAdd(begin, obj.currentPeriodsRent), 0);
				this.haspayMoney = totalValue;
			},

			/**
			 * 对接口返回的账单列表数据进行加工处理，待支付的必须放在前面，已经支付过的放在后面
			 */
			periodListHandler(periodList) {
				if (Object.prototype.toString.call(periodList) !== '[object Array]') {
					return;
				}
				const unpayListTemp = [];
				const haspayListTemp = [];

				periodList.forEach((obj) => {
					// debugger
					const {
						status
					} = obj;
					if (unpayStatus.includes(status)) {
						// 需要支付
						unpayListTemp.push(obj);
					} else if (this.checkHasPay(status)) {
						// 已经支付过
						haspayListTemp.push(obj);
					}
				});

				this.unpayList = unpayListTemp; // 未支付租期，为了后面确定是否逾期使用
				this.haspayList = haspayListTemp; // 为了后面计算已支付租金使用
				// 参考老的实现，一个账单就只有1，2，3，4这几种状态，所以不用担心没有展示接口返回的其它数据
				this.billList = [...unpayListTemp, ...haspayListTemp];

				console.log('账单列表', this.billList);

				// console.log(this.billList, '账单列表', periodList)
				for (let i of this.billList) {
					console.log(i.isLocked);
					if (i.isLocked == 2 && i.status == 1) {
						this.type = false;
					}
				}
				// if(this.type == false){
				//   if(this.billList[key].isLocked == 1){
				//     this.hipe = "checkHasChose(periodObj)"
				//   }else{
				//     this.hipe = "!checkHasChose(periodObj)"
				//   }
				// }
			},

			/**
			 * 判断是否需要显示额外文本，比如说已逾期；（还有3天即将还款）
			 * @param {object} periodItem : 期数对象
			 */
			returnAddonText(periodItem) {
				if (this.returnStatusCn(periodItem) === '已支付') return; // 已支付的话，无需显示时效状态
				const createDate = new Date(periodItem.createTime.replace(/-/g, '/')); // 创建时间
				const periodPayDate = new Date(periodItem.statementDate.replace(/-/g,
					'/')); // 先对接口返回的时间字符串做一个格式处理，老ios不支持实例化以-作为分隔符的date对象，不知现在如何

				if (periodItem.currentPeriods == 1) {
					// 第一期不处理
					return;
				}
				// if (
				//   createDate.getFullYear() == periodPayDate.getFullYear() &&
				//   createDate.getMonth() == periodPayDate.getMonth() &&
				//   createDate.getDate() == periodPayDate.getDate()
				// ) {
				//   return
				// }
				const timeGap = periodPayDate - new Date(); // 两者时间之差，毫秒为单位
				// if (timeGap <= 0) return '（已逾期）'; // 说明已逾期
				// const max = 3 * 24 * 60 * 60 * 1000 // 3天
				// if (timeGap <= max) return "（还有3天即将还款）"
			},

			/**
			 * 返回期数的支付时间
			 * @param {Object} periodItem : 期数对象
			 */
			returnPeriodPayTime(periodItem) {
				return formatStrDate(periodItem.statementDate || '', 'yyyy年MM月dd日');
			},

			/**
			 * 判断这期账单数据已经勾选
			 */
			checkHasChose(periodObj) {
				return periodObj && periodObj.$choosed;
			},

			/**
			 * 判断账单已支付过
			 */
			checkHasPay(status) {
				// console.log(status)
				return haspayStatus.includes(status);
			},

			checkLinePay(status) {
				// console.log(status)
				return unlineStatus.includes(status);
			},

			/**
			 * 返回订单的中文描述
			 */
			returnStatusCn(periodItem) {
				const {
					status
				} = periodItem;
				if (unpayStatus.includes(status)) {
					// 未支付相关状态
					return '待支付';
				} else if (this.checkHasPay(status)) {
					return '已支付';
				}
			},

			/**
			 * 勾选/取消勾选账单对象的时候触发
			 */
			toggleChooseHandler(idx) {
				console.log(11, idx);
				const obj = this.billList[idx] || {}; // 账单对象
				obj.$choosed = !!!obj.$choosed;
				this.$set(this.billList, idx, obj);
			},

			/**
			 * 返回提交数据
			 */
			returnPostData() {
				const orderId = this.queryOrderId;
				const totalAmount = this.payMoney;
				const periodList = this.periodList;

				const postObj = {
					orderId,
					totalAmount,
					periodList
				};
				const cnMap = {
					orderId: '订单ID',
					totalAmount: '总价',
					periodList: '期数'
				};
				return this.$postDataGuard(postObj, cnMap);
			},

			//点击蒙层关闭弹窗
			tab_mengceng() {
				this.mengcengShow = false;
				this.tankuangShow = false;
				this.userFeedbackHidden = true;
			},
			moveHandle() {},

			/**
			 * 点击支付的时候触发
			 */
			//先触发选择弹出窗和灰色蒙层  选择支付宝支付还是微信支付
			payHandler1() {
				if (this.payMoney == '0.00') {
					uni.showToast({
						icon: 'none',
						title: '请选择要支付的列!'
					});
					return;
				}
				this.mengcengShow = true;
				this.tankuangShow = true;
			},
			//选好支付宝支付或者微信支付后点击确定按钮
			btn_comfirm() {
				if (!this.zhifubaoCheckedState && !this.weixinCheckedState && !this.helibaoCheckedState) {
					uni.showToast({
						icon: 'none',
						title: '请选择支付方式!'
					});
					return;
				}
				if (this.zhifubaoCheckedState || this.weixinCheckedState) {
					//走支付宝接口 或者 微信支付接口
					this.mengcengShow = false;
					this.tankuangShow = false;
					this.payHandler();
					console.log('走的支付宝的支付接口');
				} else {
					//走微信支付其他支付接口
					// this.mengcengShow = false
					// this.tankuangShow = false
					// this.payHandler()
					// bl ? this.$refs.merchantInfo.show() : this.$refs.merchantInfo.hide();
					console.log('走合利宝支付接口');
					this.userFeedbackHidden = false;
				}
			},
			tab_zhifubao() {
				this.zhifubaoCheckedState = !this.zhifubaoCheckedState;
				this.weixinCheckedState = false;
				this.helibaoCheckedState = false;
			},
			tab_weixin() {
				this.weixinCheckedState = !this.weixinCheckedState;
				this.zhifubaoCheckedState = false;
				this.helibaoCheckedState = false;
			},
			tab_hlb() {
				// alert(123)
				this.helibaoCheckedState = !this.helibaoCheckedState;
				this.weixinCheckedState = false;
				this.zhifubaoCheckedState = false;
			},

			confirmPay() {
				// console.log("去支付", this.returnPostData())
				var myreg = /^(((1[0-9]{2}))+\d{8})$/;
				if (!myreg.test(this.hlb.telephone)) {
					uni.showToast({
						icon: 'none',
						title: '手机号格式错误'
					});
					return false;
				}

				if (this.hlb.sendCode == undefined || this.hlb.sendCode == '') {
					uni.showToast({
						icon: 'none',
						title: '验证码不能为空'
					});
					return false;
				}

				const {
					postData,
					pass
				} = this.returnPostData();
				if (!pass) return;
				if (this.submitting) return;
				getShowLoading({
					title: '处理中...'
				});
				let that = this;
				postData.bankCardNo = this.hlb.bankCardNo;
				postData.sendCode = this.hlb.sendCode;
				postData.telephone = this.hlb.telephone;
				that.$request('/order/mall/api/orderByStages/goPay', postData, 'post')
					.then((res) => {
						console.log('支付请求成功', res);
						if (res.data.pay_code == '0000') {
							// this.createHlbOrderStatus = true;
							this.fetchPeriodList();
							this.userFeedbackHidden = true;
							this.mengcengShow = false;
							this.tankuangShow = false;
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.pay_message
							});
						}
					})
					.catch((e) => {
						console.log('支付错误', e);
					})
					.finally(() => {
						getHideLoading();
						console.log('支付结束');
					});
			},

			closePay() {
				this.userFeedbackHidden = true;
				this.mengcengShow = false;
				this.tankuangShow = false;
			},

			payHandler() {
				console.log('去支付', this.returnPostData());
				const {
					postData,
					pass
				} = this.returnPostData();
				if (!pass) return;
				if (this.submitting) return;
				getShowLoading({
					title: '处理中...'
				});

				let that = this;
				// #ifdef APP-PLUS
				uni.getProvider({
					service: 'payment',
					success: function(res) {
						console.log('获取支付方式', res.provider);
						if (~res.provider.indexOf('alipay')) {
							console.log('222222222222222postDaTA,', postData);
							// 选择支付宝付款
							if (that.zhifubaoCheckedState) {
								that.$request('/order/mall/api/orderByStages/alipayTradeAppPay', postData,
										'post')
									.then((res) => {
										console.log('支付请求成功', res);
										if (res.data != null && res.data.payUrl != null) {
											//从服务器获取的订单
											var orderInfo = res.data.payUrl;
											uni.requestPayment({
												provider: 'alipay', //固定值为"alipay"
												orderInfo: orderInfo, //此处为服务器返回的订单信息字符串
												success: function(res) {
													var rawdata = JSON.parse(res.rawdata);
													console.log('支付成功');
													setTimeout(() => {
														uni.showToast({
															icon: 'none',
															title: '支付成功'
														});
														this.fetchPeriodList();
													}, 2500); // 增加延时，避免后端接受支付宝回调不及时
												},
												fail: function(err) {
													console.log('支付失败:' + JSON.stringify(err));
												}
											});
										}
									})
									.catch((e) => {
										console.log('支付错误', e);
									})
									.finally(() => {
										getHideLoading();
										console.log('支付结束');
									});
							}
							//  选择微信付款
							else {
								that.$request('/order/mall/api/orderByStages/wxPayApp', postData, 'post')
									.then((res) => {
										console.log('===卡门app微信支付===', res);
										if (res.data) {
											console.log('129999==== ');
											uni.requestPayment({
												provider: 'wxpay',
												orderInfo: {
													appid: res.data
														.appid, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
													noncestr: res.data.nonceStr, // 随机字符串
													package: res.data.packageVal, // 固定值
													partnerid: res.data.partnerId, // 微信支付商户号
													prepayid: res.data.prepayId, // 统一下单订单号
													timestamp: res.data.timestamp, // 时间戳（单位：秒）
													sign: res.data.sign // 签名，这里用的 MD5/RSA 签名
												}, //此处为服务器返回的订单信息字符串
												success: function(res) {
													console.log('支付成功');
													setTimeout(() => {
														uni.showToast({
															icon: 'none',
															title: '支付成功'
														});
														this.fetchPeriodList();
														// uni.navigateBack({
														// 	delta: 1,
														// })
													}, 1500); // 增加延时，避免后端接受支付宝回调不及时
												},
												fail: function(err) {
													console.log('支付失败:' + JSON.stringify(err));
												}
											});
										}
									})
									.catch((e) => {
										console.log('支付错误', e);
										// uni.navigateBack({
										// 	delta: 1,
										// })
									})
									.finally(() => {
										getHideLoading();
										console.log('支付结束');
										// uni.navigateBack({
										// 	delta: 1,
										// })
									});
							}
						} else {
							// #ifdef  MP-WEIXIN
							that.$request('/order/mall/api/orderByStages/wxPayJsapi', postData, 'post')
								.then((res) => {
									console.log('账单支付--微信支付--请求成功', res);
									if (res.data) {
										wx.requestPayment({
											timeStamp: res.data.timeStamp,
											nonceStr: res.data.nonceStr,
											package: res.data.package,
											signType: 'RSA',
											paySign: res.data.paySign,
											success: function(res) {
												console.log('账单支付-微信-支付成功');
												that.fetchPeriodList();
											},
											fail: function(res) {
												console.log('账单支付-微信-支付失败');
											},
											complete: function(res) {
												that.fetchPeriodList();
												console.log('账单支付-微信-支付完成');
											}
										});
									}
								})
								.catch((e) => {
									console.log('支付错误', e);
								})
								.finally(() => {
									getHideLoading();
									console.log('支付结束');
								});
							// #endif
						}
					}
				});
				// #endif

				// #ifdef H5
				console.log('租赁走的满满当当的参数呀', postData);
				if (this.zhifubaoCheckedState) {
					that.$request('/order/mall/api/orderByStages/alipayTradeWapPay', postData, 'post')
						.then((res) => {
							if (res.data != null && res.data.payUrl != null) {
								//从服务器获取的订单
								var orderInfo = res.data.payUrl;
								window.location.href = orderInfo;
							}
						})
						.catch((e) => {
							console.log('支付错误', e);
						})
						.finally(() => {
							getHideLoading();
							console.log('支付结束');
						});
				} else {
					that.$request('/order/mall/api/orderByStages/wxPayH5', postData, 'post')
						.then((res) => {
							if (res.data) {
								window.location.href = res.data.h5_url;
								// console.log('129999==== ');
								// uni.requestPayment({
								//     provider: 'wxpay',
								//     orderInfo: {
								//         appid: res.data.appid, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
								//         noncestr: res.data.nonceStr, // 随机字符串
								//         package: res.data.packageVal, // 固定值
								//         partnerid: res.data.partnerId, // 微信支付商户号
								//         prepayid: res.data.prepayId, // 统一下单订单号
								//         timestamp: res.data.timestamp, // 时间戳（单位：秒）
								//         sign: res.data.sign // 签名，这里用的 MD5/RSA 签名
								//     }, //此处为服务器返回的订单信息字符串
								//     success: function (res) {
								//         console.log('支付成功');
								//         setTimeout(() => {
								//             uni.showToast({
								//                 icon: 'none',
								//                 title: '支付成功'
								//             });
								//             this.fetchPeriodList();
								//             // uni.navigateBack({
								//             // 	delta: 1,
								//             // })
								//         }, 1500); // 增加延时，避免后端接受支付宝回调不及时
								//     },
								//     fail: function (err) {
								//         console.log('支付失败:' + JSON.stringify(err));
								//     }
								// });
							}
						})
						.catch((e) => {
							console.log('支付错误', e);
							// uni.navigateBack({
							// 	delta: 1,
							// })
						})
						.finally(() => {
							getHideLoading();
							console.log('支付结束');
							// uni.navigateBack({
							// 	delta: 1,
							// })
						});
				}
				// #endif
			},
			//在支付宝小程序中才走的支付方法
			// #ifdef  MP-ALIPAY
			payHandler_zfb() {
				const {
					postData,
					pass
				} = this.returnPostData();
				if (!pass) return;
				if (this.submitting) return;
				getShowLoading({
					title: '处理中...'
				});
				this.$request('order/mall/api/orderByStages/liteOrderByStagesPay', postData, 'POST')
					.then((res) => {
						const resData = res.data || {};
						const {
							payUrl
						} = resData;
						if (!payUrl) return;

						return tradePay(payUrl, true)
							.then((res) => {
								console.log('888支付宝账单支付的回调', res);
								getHideLoading();
								this.$eventEmitter.emit(
									'refreshMyPageConfigData'); // 刷新我的页面的配置数据，使得我的订单页面中各个类型订单气泡显示对应的数字
								if (res.resultCode === '9000') {
									// 支付成功
									setTimeout(() => {
										uni.showToast({
											title: '支付成功'
										});
										this.fetchPeriodList();
									}, 1000); // 加入一点延时，避免后端接收支付宝回调不及时。若不需要，那去掉延时
								}
							})
							.catch(() => {
								// 支付失败
								getHideLoading();
								uni.showToast({
									title: '支付失败',
									icon: 'none'
								});
							});
					})
					.finally(() => {
						getHideLoading();
					});
			},
			// #endif

			/**
			 * 判断是否需要显示弹窗信息：未关闭 且 存在未还账单
			 */
			checkShowTopTip() {
				return this.showTopTip && this.returnTopToolTip();
			},

			/**
			 * 返回总租金所对应的字段
			 */
			returnMoney() {
				if (this.fromOrderDetail) {
					// 表示是从订单详情跳转过来的
					return this.$getGlobalData('zongzujinshuju0712');
				}
				return '';
			}
		}
	};
</script>

<style lang="scss" scoped>
	.wrapper {
		// min-height: 100vh;
		background: #fff;
		padding-bottom: 20rpx;
		padding-top: 10px;

		.topTip {
			height: 60rpx;
			@include global-background-color();
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #fff;
			margin-bottom: 20rpx;

			.close-icon {
				width: 26rpx;
				height: 26rpx;
			}
		}

		.goods-section {
			margin-top: 16upx;
			background: #fff;
			padding-bottom: 1px;

			.g-header {
				display: flex;
				align-items: center;
				height: 84upx;
				position: relative;
			}

			.logo {
				display: block;
				width: 50upx;
				height: 50upx;
				border-radius: 100px;
			}

			.name {
				font-size: 30upx;
				color: #606266;
				margin-left: 24upx;
			}

			.g-item {
				display: flex;
				margin: 20upx 30upx;

				image {
					flex-shrink: 0;
					display: block;
					width: 140upx;
					height: 140upx;
					border-radius: 4upx;
				}

				.right {
					flex: 1;
					padding-left: 24upx;
					overflow: hidden;
				}

				.title {
					font-size: 30upx;
					color: #303133;
				}

				.spec {
					font-size: 26upx;
					color: #909399;
				}

				.promotion {
					font-size: 24upx;
				}

				.price-box {
					display: flex;
					align-items: center;
					font-size: 32upx;
					color: #303133;
					padding-top: 10upx;

					.price {
						margin-bottom: 4upx;
					}

					.number {
						font-size: 26upx;
						color: #606266;
						margin-left: 20upx;
					}
				}

				.step-box {
					position: relative;
				}
			}
		}

		.product-wrapper {
			padding: 32rpx 0;
			background: #fff;
			margin-bottom: 50rpx;

			.top-item {
				padding: 0 30rpx;
				margin-bottom: 40rpx;
			}

			.bottom {
				padding: 0 46rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.top {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						margin-bottom: 10rpx;
					}

					.b-money {
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
					}
				}
			}
		}

		.period-wrapper {
			padding: 0 0rpx;

			.title {
				margin-bottom: 20rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.period-list {
				.period-item {
					position: relative;
					padding: 20rpx 26rpx;
					background: #ffffff;
					border-radius: 20rpx;

					.top {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 20rpx;

						.left {
							.period {
								font-size: 28rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #333333;
								margin-bottom: 17rpx;
							}

							.bottom-money {
								display: flex;
								align-items: center;
								font-family: PingFangSC-Regular, PingFang SC;

								.money {
									font-size: 32rpx;
									font-weight: 600;
									color: #333333;
									line-height: 59rpx;
								}

								.red-text {
									font-size: 24rpx;
									font-weight: 400;
									color: #f1192a;
								}
							}
						}

						.right {
							.icon {
								width: 50rpx;
								height: 50rpx;
							}
						}
					}

					.bottom {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}

				.period-item+.period-item {
					margin-top: 20rpx;
				}
			}
		}

		.btn-wrapper {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			z-index: 10;
			border: 1rpx solid #dcdcdc;
			border-left-style: none;
			border-right-style: none;

			.left {
				padding-left: 30rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				height: 100%;
				display: flex;
				align-items: center;
				flex-grow: 1;
				background: #fff;

				.t-money {
					font-size: 38rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #e52021;

					.fuhao {
						font-size: 28rpx;
					}
				}
			}

			.right {
				width: 328rpx;
				height: 100%;
				flex-shrink: 0;
				@include global-background-color();
				@include global-border-top(1rpx);
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				// border-radius: 40rpx;
			}
		}

		.hasPay {
			color: #333 !important;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 30rpx;
		}

		.check-img {
			position: absolute;
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			top: 35%;
			transform: translateY(-50%);
			right: 42rpx;
		}

		.unchose {
			width: 46rpx;
			height: 46rpx;
			border: 2rpx solid #ddd;
		}

		.hide {
			display: none;
		}

		.tankuang {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 21;
			width: 100%;
			background-color: white;
			padding: 20rpx;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;

			.title {
				font-size: 34rpx;
				margin-top: 10rpx;
				font-weight: bold;
				height: 60rpx;
				line-height: 60rpx;
				padding-left: 30rpx;
			}

			.btn_bottom {
				@include global-background-color();
				text-align: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #fff;
				border: beige;

				margin: 40rpx 0;
				width: 100%;
				height: 80rpx;
				border-radius: 100px;
				line-height: 80rpx;
			}
		}

		.mengceng {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 100vh;
			z-index: 20;
			opacity: 0.5;
			background-color: #999999;
		}

		/*弹窗*/
		.popup_overlay {
			position: fixed;
			top: 0%;
			left: 0%;
			width: 100%;
			height: 100%;
			background-color: black;
			z-index: 1001;
			-moz-opacity: 0.8;
			opacity: 0.8;
			filter: alpha(opacity=88);
		}

		.popup_content {
			position: fixed;
			bottom: -2px;
			width: 100%;
			height: auto;
			background-color: white;
			z-index: 25;
			overflow: auto;
			border-radius: 30rpx 30rpx 0 0;

			.popup_title {
				text-align: center;
				width: 100%;
				font-size: 34rpx;
				height: 90rpx;
				line-height: 90rpx;
				font-weight: bold;
				position: relative;

				/deep/.u-icon {
					position: absolute;
					right: 10rpx;
					padding: 20rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			.setaddress {
				.tips {
					// width: 100%;
					height: 98rpx;
					@include global-background-color();
					font-size: 24rpx;
					font-weight: 400;
					color: #333333;
					line-height: 33rpx;
					padding-right: 20rpx;
					padding-left: 30rpx;
					display: flex;
					align-items: center;
					position: relative;

					.tips-txt {
						padding-right: 40rpx;
					}

					.icon {
						position: absolute;
						right: 60rpx;
						top: 22rpx;

						&::before {
							position: absolute;
							left: 15rpx;
							content: ' ';
							height: 20rpx;
							width: 3rpx;
							background-color: #111111;
						}

						&::after {
							position: absolute;
							left: 15rpx;
							content: ' ';
							height: 20rpx;
							width: 3rpx;
							background-color: #111111;
						}

						&:before {
							transform: rotate(45deg);
						}

						&:after {
							transform: rotate(-45deg);
						}
					}
				}

				.realName-page {
					@include wh(100%, 100%);

					.contents {
						padding: 0;
						background-color: #ffffff;
						border-radius: 20rpx;

						.label {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
						}

						.contents-item-view {
							height: 100rpx;
							width: 100%;
							box-sizing: border-box;
							background-color: #fff;
							display: flex;
							flex-direction: row;
							justify-content: flex-start;
							align-items: center;
							font-family: PingFangSC-Regular;
							color: #333333;
							font-size: 28rpx;
							padding: 20rpx 0;
							border-bottom: 1px solid #efefef;

							.name {
								width: 180rpx;
								font-size: 30rpx;
								font-weight: 700;
								text-align: right;
								color: #333;
							}

							.contents-item-input {
								flex: 1;
								text-align: left;
								padding-right: 20rpx;
								// font-size: 28rpx;
								// font-family: PingFangSC-Regular, PingFang SC;
								// font-weight: 400;
								color: #333;
							}

							.u-select {
								height: 100%;
								flex: 1;
							}

							/deep/ .contents-item-view-city {
								font-size: 28rpx;
								font-weight: normal;
								color: #999999;
								padding-right: 20rpx;
							}
						}
					}

					.iocn {
						width: 10rpx;
						height: 16rpx;
						margin-left: 10rpx;
					}
				}

				.bank-buttons {
					margin: 50rpx 0;

					.footer {
						@include global-background-color();
						text-align: center;
						font-size: 32rpx;
						font-weight: 500;
						color: #fff;
						border: beige;
						width: 89%;
						height: 80rpx;
						border-radius: 100px;
						line-height: 80rpx;
					}
				}

				.street {
					padding-top: 20rpx;
					padding-bottom: 20rpx;
					box-sizing: border-box;
					margin-bottom: 20rpx;
					border-radius: 20rpx;
					background: #fff;
					margin-top: 20rpx;

					.text-area {
						box-sizing: border-box;
						min-height: 200rpx;

						padding: 0 30rpx;
					}
				}

				.min-switch {
					font-size: 28rpx;
					padding: 24rpx 30rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					background: #fff;
					border-radius: 20rpx;
					font-weight: 400;
					color: #333333;

					.my-switch {
						display: block;
						position: relative;
						width: 80rpx;
						height: 32rpx;
						outline: 0;
						border-radius: 16rpx;
						box-sizing: border-box;
						background-color: #dfdfdf;
						transition: background-color 0.1s, border 0.1s;

						&:after {
							content: ' ';
							position: absolute;
							top: -5rpx;
							left: -15rpx;
							width: 40rpx;
							height: 40rpx;
							border-radius: 20rpx;
							background: #ffffff;
							box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
							transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
						}
					}

					.my-switch-on {
						@include global-background-color();

						&:after {
							transform: translateX(61rpx);
						}
					}
				}

				.delete {
					display: flex;
					justify-content: flex-end;
					padding: 30rpx 24rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
				}
			}
		}

		.popup_textarea_item {
			padding: 5rpx;
			height: 110rpx;
			width: 100%;
			// background-color: #F1F1F1;
			margin-top: 20rpx;
			padding-top: 25rpx;
		}

		.popup_textarea {
			// width: 410rpx;
			font-size: 26rpx;
			// margin-left: 20rpx;
			height: 90rpx;
			line-height: 90rpx;
			background: #f1f1f1;
			margin-bottom: 20rpx;
			padding: 20rpx;
		}

		.popup_button {
			color: #000000;
		}

		.buttons {
			text-align: center;
			font-size: 32rpx;
			margin-top: 40rpx;
			border: 1px solid #dedede;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
		}
	}

	/deep/.btnWrapper {
		background: none;
	}

	.bank-title {
		text-align: center;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 36rpx;
	}

	.bank-list {
		padding: 0 40rpx 40rpx;

		.bank-list-item {
			padding: 30rpx 0;
			display: flex;
			width: 100% !important;
			position: relative;
			border: 0 solid #e4e7ed;
			border-bottom-width: 1px;

			/deep/.u-radio__icon-wrap {
				position: absolute;
				right: 20rpx;
			}

			.number {
				color: #333;
				font-size: 34rpx;
			}

			.name {
				color: #666;
			}
		}
	}
</style>